<template>
  <div class="my">
    <van-cell class="my-header" :is-link="islink" :to="path">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <img
        src="https://img.youpin.mi-img.com/shopcenter/7dhur6i77hg_11350267611625208274363.png"
      />
      <span>{{ user }}</span>
    </van-cell>
    <van-cell-group class="van-cell-group">
      <van-cell
        title="我的订单"
        is-link
        class="my-cell"
        :to="{ path: '/orderlist', query: { active: 0 } }"
      />
    </van-cell-group>
    <navGrid />
    <myMoney />
    <listAbout />
    <van-button v-if="show" class="btn" type="default" @click="tui">退出</van-button>
    <DataFooter></DataFooter>
  </div>
</template>

<script>
// @ is an alias to /src

import DataFooter from "../../components/Footer.vue";
import listAbout from "./components/my/listAbout.vue";
import myMoney from "./components/my/myMoney.vue";
import navGrid from "./components/my/navGrid.vue";

export default {
  name: "My",
  data() {
    return {};
  },
  computed: {
    user() {
      if (localStorage.getItem("user") == null) {
        return "请登录";
      }
      return localStorage.getItem("user");
    },
    path() {
      if (localStorage.getItem("user") == null) {
        return "/login";
      }

      return "";
    },
    islink() {
      if (localStorage.getItem("user") == null) {
        return true;
      }

      return false;
    },
    show() {
      if (localStorage.getItem("user") == null) {
        return false;
      }
      return true;
    },
  },
  components: {
    DataFooter,
    listAbout,
    myMoney,
    navGrid,
  },
  methods: {
    tui(){
      localStorage.removeItem("user")
      this.$router.push("/login")
    }
  },
};
</script>
<style  scoped>
.btn {
  width: 100%;
  margin: auto;
}
.my-header {
  background-image: url(https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_bg_top.png);
  background-size: 100%;
  height: 1.1rem;
  align-items: center;
  display: flex;
}
.my-header > div {
  display: flex;
  align-items: center;
}
.my-header > div span {
  padding-left: 0.2rem;
  color: #fff;
  font-size: 0.16rem;
}
.my-header img {
  margin-left: 0.11rem;
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
}

.my-cell {
  height: 0.45rem;
  align-items: center;
}
</style>

<style >
.van-cell-group .my-van-cell {
  height: 0.55rem;
  align-items: center;
}
.van-cell-group .my-van-cell .van-icon {
  height: 0.42rem;
  height: 0.42rem;
}

.van-cell-group .my-van-cell .van-icon__image {
  font-size: 0.42rem;
}

.van-grid-item__text {
  font-size: 15px !important;
}

.van-cell-group {
  margin-top: 0.05rem;
}
</style>
